<template>
    <Transition>
        <div class='nameList d-flex justify-center align-center' v-if="nameList.show" @mousedown.self="nameList.close()">
            <div id="camlist" class="listbox d-flex flex-column">
                <div class="head d-flex justify-space-between">
                    <div class="left">
                        <p>{{ $t('message.NameList.a') }}</p>
                        <span>{{ $t('message.NameList.b') }}</span>
                    </div>
                    <div>
                        <!-- <Vue3Lottie :animationData="animationData" :height="200" :width="200" /> -->
                        <VIcon class="close" @click="nameList.close()" v-show="!photo">mdi mdi-close</VIcon>
                        <div class="flook" @click="onCamera" v-show="!photo">
                            <img src="@/assets/fenxiang.png" class="carm">
                            <span>{{ $t("message.Global.shares.na") }}</span>
                        </div>
                        <img src="@/assets/logo.png" class="logs" v-show="photo"/>
                    </div>
                </div>
                <div class="box" :class="{ add: user.isLogin && currentUser.top > 10 }">
                    <VRow class="had c-clor c-title-4" no-gutters>
                        <VCol class="col0" cols="1">{{ $t('message.NameList.c') }}</VCol>
                        <VCol class="col1" cols="4">
                            <div style="display: flex;justify-content: flex-start;width: 80%;">{{ $t('message.NameList.d') }}</div> 
                        </VCol>
                        <VCol class="col2" cols="4">{{ $t('message.NameList.e') }}</VCol>
                        <!-- <VCol class="col3" cols="2">{{ $t('message.NameList.f') }}</VCol> -->
                        <VCol class="col4" cols="3">{{ $t('message.NameList.g') }}</VCol>
                    </VRow>
                    <VRow class="list c-title-3" :class="{ mytop2: user.isLogin && currentUser.top == item.top }" no-gutters
                        v-for="(item, idx) in topList">
                        <VCol class="col0" cols="1">
                            <Yranking :num="item.top"></Yranking>
                        </VCol>
                        <VCol class="col1" cols="4" :title="item.id">{{ tools.fromid(item.id) }}</VCol>
                        <VCol class="col2" cols="4"><JEnergy :num="item.energy/100"></JEnergy></VCol>
                        <!-- <VCol class="col3" cols="2"><JEnergy :num="item.luckEnergy/100"></JEnergy></VCol> -->
                        <VCol class="col4" cols="3">{{ tools.fromtDate(item.regTime) }}</VCol>
                    </VRow>
                    <VRow class="mytop c-title-3" no-gutters v-if="user.isLogin && currentUser.top > 10">
                        <VCol class="col0" cols="1">
                            <Yranking :num="currentUser.top"></Yranking>
                        </VCol>
                        <VCol class="col1" cols="4">{{ tools.fromid(currentUser.id) }}</VCol>
                        <VCol class="col2" cols="4"><JEnergy :num="currentUser.energy/100"></JEnergy></VCol>
                        <!-- <VCol class="col3" cols="2"><JEnergy :num="currentUser.luckEnergy/100"></JEnergy></VCol> -->
                        <VCol class="col4" cols="3">{{ tools.fromtDate(currentUser.regTime) }}</VCol>
                    </VRow>
                    <JEmpty v-if="topList.length === 0"></JEmpty>
                </div>
            </div>
        </div>
    </Transition>
</template>

<script lang='ts' setup>
import Yranking from "@/components/y-ranking/index.vue"
import JEmpty from "@/components/j-empty/index.vue";
import JEnergy from "@/components/j-energy/index.vue";
import animationData from "@/views/accout/wOU04UW84s.json";
import { nameList, topList, currentUser, tools } from "./script/nameList";
// import { Vue3Lottie } from "vue3-lottie";
import { useUser } from "@/stores/user";
import { YShare } from "@/components/y-share/script";
import * as htmlToImage from 'html-to-image';
import i18n from "@/locals";
import { ref } from "vue";
const user = useUser();

const photo = ref(false);

const onCamera = () => {
    photo.value = true;
    const char: HTMLCanvasElement = document.querySelector("#camlist")!;
    // const color = char.parentElement!.style.background;
    // char.style.background = "var(--card)";
    // const canvas = await html2canvas(char);
    htmlToImage.toCanvas(char).then(function (canvas: any) {
        // document.body.appendChild(canvas);
        YShare.open(canvas, "Share or download chart image", i18n.global.t("message.NameList.a"));
        // char.style.background = color;
    });

    setTimeout(() => {
        photo.value = false;
    }, 1200);
}
</script>

<style lang='less' scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.lottie-animation-container {
    width: 200px;
    height: 90px;
}

.nameList {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);

    .listbox {
        width: 660px;
        height: 720px;
        // background-color: #23252D;
        // background-size: 100%;
        background-image: url("./svg/boxbg.png");
        position: relative;
        align-items: center;

        .head {
            width: 100%;
            height: 150px;
            padding-inline: 40px;
            padding-top: 30px;
            background-size: 100%;
            background-image: url("./svg/bg.png");
            position: relative;

            .left {
                p {
                    font-size: 24px;
                    font-size: 28px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #EAECEF;
                    line-height: 40px;
                }

                span {
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    color: #EAECEF;
                    line-height: 20px;
                }
            }

            .close {
                position: absolute;
                top: 20px;
                right: 20px;
            }
        }

        .box {
            width: 580px;
            // height: 600px;
            background: #171A1F;
            box-shadow: 4px 4px 6px 4px #171A1F;
            border-radius: 4px;
            position: absolute;
            top: 120px;

            &.add {
                // bottom: 0;
                height: 600px;
            }

            .had {
                .col1 {
                    justify-content: center;
                    padding-left: 0 !important;
                }
            }

            .v-row {

                .v-col {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    position: relative;
                }

                .col0 {
                    padding-left: 20px;
                }

                .col1 {
                    text-align: center;
                    // justify-content: center;
                    padding-left: 20px;
                }

                .col4 {
                    text-align: right;
                    justify-content: flex-end;
                    padding-right: 20px;
                }
            }

            .v-row:not(:last-child) {
                ::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: 0;
                    border-bottom: 1px solid var(--border_);
                }
            }

            .list,
            .mytop {
                .col0 {
                    font-weight: bold;
                }

                .col2,
                .col3 {
                    color: var(--main);
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #FCC235;
                    line-height: 20px;
                }

                .col1 {
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #EAECEF;
                    line-height: 20px;
                }

                .col4 {
                    text-wrap: nowrap;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #EAECEF;
                    line-height: 20px;
                }
            }

            .mytop {
                position: absolute;
                bottom: 0;
                width: 100%;
                background-color: #4D4633;
            }

            .mytop2 {
                position: relative;
                bottom: auto;
                width: 100%;
                background-color: #4D4633;
            }
        }
    }
}

.flook {
    position: absolute;
    right: 60px;
    top: 50px;
    min-width: 66px;
    padding: 0 10px;
    height: 35px;
    background: #353A40;
    border-radius: 4px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #B1B6C6;
    font-size: 12px;
    transition: all 200ms;
    cursor: pointer;

    .carm {
        width: 16px;
        height: 16px;
        object-fit: contain;
        margin-right: 7px;
    }

    &:hover {
        background: darken(#353A40, 10%);
    }
}
.logs{
    position: absolute;
    right: 60px;
    top: 50px;
    width: 120px;
    height: 40px;
    object-fit: contain;
}

@media (max-width: 1600px) {
  .listbox {
    transform: scale(0.72);
  }
}

</style>